import { Row, Col, Table, Space, Popconfirm, Divider, message } from "antd";
import { useModel, history } from "umi";
import { Card as SemiCard, ButtonGroup, Button, List } from "@douyinfe/semi-ui";
import { IconRefresh, IconPlusCircle } from "@douyinfe/semi-icons";
import { useEffect } from "react";

import useCustomers from "../hooks/useCustomers";

import EditAuthApply from "../components/customer/edit.auth.apply";

const DashboardPage = () => {
    const { windowInnerHeight, UTCTimeToLocal } = useModel("global");
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent } = useModel("global.modal");
    const { dataLoading, loadWaitExamineApply, waitExamineApply, deleteWaitExamineApply } = useCustomers();

    const loadData = async () => {
        let res = await loadWaitExamineApply();
        if (res?.length === 0) history.replace("/customers");
    };

    useEffect(() => {
        loadData();
    }, []);

    const renderOperate = (_, r, i) => (
        <Space split={<Divider type="vertical" style={{ margin: 0 }} />}>
            {["已驳回"].includes(r.oaaaExst) && (
                <a
                    onClick={() => {
                        setModalTitle("重新申请");
                        setModalVisible(true);
                        setModalWidth(750);
                        setModalComponent(<EditAuthApply record={r} reloadData={loadData} />);
                    }}
                >
                    重新申请
                </a>
            )}
            {["已驳回"].includes(r.oaaaExst) && (
                <a
                    onClick={() => {
                        setModalTitle("审核信息");
                        setModalVisible(true);
                        setModalWidth(750);
                        setModalComponent(<ExamineInfo record={r} />);
                    }}
                >
                    审核信息
                </a>
            )}
            {["待审核", "已驳回"].includes(r.oaaaExst) && (
                <Popconfirm
                    title="确认要删除该授权申请吗？"
                    placement="topRight"
                    onConfirm={() =>
                        deleteWaitExamineApply(r.oaaaUuid, (res) => {
                            if (res) {
                                message.success("删除成功");
                                loadData();
                            }
                        })
                    }
                >
                    <a>删除申请</a>
                </Popconfirm>
            )}
        </Space>
    );

    const columns = [
        { title: "序号", width: 60, align: "center", render: (_, r, i) => i + 1 },
        { title: "客户名称", dataIndex: "customer", align: "left", render: (_, r, i) => _?.oiName },
        { title: "申请时间", dataIndex: "oaaaTime", align: "center", width: 160, render: (_, r, i) => UTCTimeToLocal(_) },
        { title: "授权方式", dataIndex: "oaaaType", align: "center", width: 120 },
        { title: "授权的角色", dataIndex: "oaaaRole", align: "left", render: (_, r, i) => _.join(", ") },
        { title: "申请人", dataIndex: "apInfo", align: "center", width: 100, render: (_, r, i) => _.name },
        { title: "授权的月数", dataIndex: "oaaaMont", align: "center", width: 100 },
        // { title: "平台结算金额", dataIndex: "oaaaSppr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
        { title: "客户结算金额", dataIndex: "oaaaEcpr", align: "right", width: 120, render: (_, r, i) => "￥" + helper.numberFormat(_, 2) },
        { title: "审核状态", dataIndex: "oaaaExst", align: "center", width: 100 },
        { title: "操作", align: "center", width: 240, render: renderOperate },
    ];

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <SemiCard
            title={<span style={{ lineHeight: "32px", fontSize: 16 }}>待审核的授权列表</span>}
            headerExtraContent={
                <ButtonGroup>
                    <Button icon={<IconRefresh />} onClick={loadData}></Button>
                </ButtonGroup>
            }
            headerStyle={{ padding: "10px 14px" }}
            shadows="always"
            bordered={false}
            bodyStyle={{ padding: 0, height: cardBodyHeight }}
            style={{ margin: 10 }}
        >
            <Table
                loading={dataLoading}
                size="small"
                dataSource={waitExamineApply}
                columns={columns}
                rowKey="oaaaUuid"
                bordered
                pagination={false}
                scroll={{
                    y: cardBodyHeight - 40 - 50,
                }}
            />
        </SemiCard>
    );
};

const ExamineInfo = ({ record }) => {
    const { UTCTimeToLocal } = useModel("global");

    const columns = [
        { title: "序号", width: 60, align: "center", render: (_, r, i) => i + 1 },
        { title: "时间", dataIndex: "time", align: "center", width: 160, render: (_, r, i) => UTCTimeToLocal(_) },
        { title: "状态", dataIndex: "status", align: "center", width: 100 },
        { title: "姓名", dataIndex: "name", align: "center", width: 100 },
        { title: "原由", dataIndex: "reason", align: "left" },
    ];

    return <Table size="small" dataSource={record.exInfo} columns={columns} rowKey="time" bordered pagination={false} />;
};

export default DashboardPage;
